import {defineComponent} from "vue"
import Table from "@/components/Table";
import "./css/index.css"

export default defineComponent({
    props: {
        tableData: {
            type: Array,
            default: []
        },
        header: {
            type: Array,
            default: []
        },
        operateBtn: {
            type: Array,
            default: []
        },
        toolBar: {
            type: Array,
            default: []
        },
        total: {
            type: Number,
            default: 0
        },
        handleSizeChange: {
            type: Function,
            default: () => {
            }
        },
        handleBtn: {
            type: Function,
            default: () => {
            }
        },
        handleCurrentChange: {
            type: Function,
            default: () => {
            }
        },
        handleToolBar: {
            type: Function,
            default: () => {
            }
        },
    },
    setup(props, {slots}) {
        return ((props) => {
            const toolBarBtn = props.toolBar.map(item => {
                return <el-button size={'small'} type={'primary'} onClick={() => {
                    props.handleToolBar(item.name)
                }
                }>{item.label}</el-button>
            })
            return (
                <>
                    <div className="toolBar">
                        {toolBarBtn}
                    </div>
                    <Table
                        tableData={props.tableData}
                        header={props.header}
                        operateBtn={props.operateBtn}
                        handleBtn={props.handleBtn}
                        v-slots={slots}
                    ></Table>
                    <div className={'pagination'}>
                        <el-pagination
                            small
                            background
                            layout="total,sizes,prev, pager, next"
                            total={props.total}
                            onSizeChange={(val) => {
                                props.handleSizeChange(val)
                            }
                            }
                            onCurrentChange={(val) => {
                                props.handleCurrentChange(val)
                            }
                            }/>
                    </div>
                </>
            )
        })
    }
})